<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
			}
			#box
			{
				width: 500px;
				height: 500px;
				background-color: blue;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var box1=document.getElementById("box1");
				var speed=10;
				
				document.onkeydown=function(event)
				{
					event=event||window.event;
					
					if(event.ctrlKey)
					{
						speed=50;
					}
					switch(event.keyCode)
					{
						case 37:
						box1.style.left=box1.offsetLeft-speed+"px";
						break;
						case 38:
						box1.style.top=box1.offsetTop-speed+"px";
						break
						case 39:
						box1.style.left=box1.offsetLeft+speed+"px";
						break;
						case 40:
						box1.style.top=box1.offsetTop+speed+"px";
						break;
					}
				      if(box1.offsetLeft==400)
					  {
						  document.onkeydown=false;
					  }
				}
				
			
			}
		</script>
	</head>
	<body>
		<div id="box">
		<div id="box1"></div>
		</div>
	</body>
</html>